<script setup>
import { onLoad, onShow } from "@dcloudio/uni-app";
import myArt from "./components/myArt.vue";
import myComment from "./components/myComment.vue";
import { useUserStore } from '@/stores/userStore'
import { onMounted, ref } from "vue";
import { workMyListApi,workFavorListApi,workLikeListApi,workCommentsListApi } from '@/apis/work.js';
import MyPicture from "./components/myPicture.vue";
const userStore = useUserStore()
// const list = ref([{ text: "1" }, { text: "2" }, { text: "3" }, { text: "4" }]);
const items = ref(["作品", "点赞", "收藏", "评论","画像"]);
const current = ref(0);
const userInfo = ref()
onShow(()=>{
  const store = userStore.getUserInfo()
  if(store){
    userInfo.value = store
    console.log("用户！！！",userInfo.value);
    
  }
})

const onClickItem = (e) => {
  if (current.value !== e.currentIndex) {
    current.value = e.currentIndex;
  }
};

const myWorkList = ref()
const collectionList = ref()
const likeList = ref()
const commentsList = ref()


const dataInit = async()=>{
  // 加载我的作品
  const workListRes = await workMyListApi()
  myWorkList.value = workListRes.data
  const collectionListRes = await workFavorListApi()
  collectionList.value = collectionListRes.data
  const likeListRes = await workLikeListApi()
  likeList.value = likeListRes.data
  const commentsListRes = await workCommentsListApi()
  commentsList.value = commentsListRes.data
}

const changeAv = ()=>{
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: async(res) => {
      // tempFilePath可以作为img标签的src属性显示图片
      const imgRes = await uni.uploadFile({
        url: `http://localhost:6060/user/changeAvatar`,
        filePath: res.tempFilePaths[0],
        name: 'file'
      });
    }
  });
}

const changeBg = ()=>{
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: async(res) => {
      // tempFilePath可以作为img标签的src属性显示图片
      const imgRes = await uni.uploadFile({
        url: `http://localhost:6060/user/changeBackGround`,
        filePath: res.tempFilePaths[0],
        name: 'file'
      });
    }
  });
}

onShow(()=>{
  dataInit()
})
onLoad(()=>{
  dataInit()
})
</script>

<template>
  <!-- 头部 -->
  <div class="header">
    <!-- 头部背景 -->
    <div class="head-back" @click="changeBg()">
      <image class="image" :src="userInfo.bgUrl" mode="aspectFill" style="width: 100%; height: 100%"/>
    </div>
    <div class="head-back background">
    </div>
    <!-- 头像 -->
    <div class="head-my">
      <image class="image" :src="userInfo.avatarUrl" mode="aspectFill" style="width: 100%; height: 100%" @click="changeAv()"/>
    </div>
    <!-- 用户名 -->
    <div class="uesername">
      <text>{{ userInfo.userName }}</text>
    </div>
  </div>
  <!-- 内容区 -->
  <!-- 切换栏 -->
  <view class="change-tab">
    <uni-segmented-control
      :current="current"
      :values="items"
      style-type="text"
      @clickItem="onClickItem"
      activeColor="#000000"
    />
  </view>
  <div class="container">
    <!-- 切换栏内容 -->
    <!-- 自己的作品 -->
    <view v-if="current === 0"><myArt :list="myWorkList" v-if="myWorkList"></myArt>
    <text v-else>暂无数据~</text>
    </view>
    <!-- 喜欢的作品 -->
    <view v-if="current === 1"><myArt :list="likeList" v-if="likeList"></myArt>
    <text v-else>暂无数据~</text>
    </view>
    <!-- 收藏的作品 -->
    <view v-if="current === 2"><myArt :list="collectionList" v-if="collectionList"></myArt>
    <text v-else>暂无数据~</text>
    </view>
    <!-- 发的评论 -->
    <view v-if="current === 3" class="comment">
      <myComment :list="commentsList" v-if="commentsList"></myComment>
      <text v-else>暂无数据~</text>
    </view>
    <view v-if="current === 4">
      <MyPicture></MyPicture>
    </view>
  </div>
</template>

<style scoped>
.header {
  position: relative; /* 定位上下文 */
  width: 100%;
  height: 300rpx;
}

.background {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}

.container {
  background-color: #f5f5f5;
  margin-top: 5rpx;
  border-radius: 10rpx;
}

.head-back {
  position: absolute; /* 绝对定位 */
  width: 100%;
  height: 100%;
  z-index: 1;
}

.change-tab {
  border: 0rpx solid #f5f5f5;
  background: #f5f5f5;
  margin-top: 5rpx;
  border-radius: 10rpx;
}

.head-my {
  position: absolute; /* 绝对定位 */
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  overflow: hidden;
  top: 75rpx;
  left: 30rpx;
  z-index: 3;
}

.uesername {
  position: absolute;
  top: 100rpx;
  left: 230rpx;
  font-size: 70rpx;
  color: #ffffff;
  z-index: 3;
}

.comment {
  padding: 5rpx;
}
</style>
